<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-3.3.-1.js"></script>
    <script type="text/javascript">

        var num = 1;

      $(function (){

          $(":button:first").click(addFile);
          $(":button:last").bind("click",cancelFile);
      });

        function addFile(){
            //1.创建一个<tr></tr>
            var $tr = $("<tr></tr>");//<tr></tr>
            //2.创建三个<td></td>
            var $td_1 = $("<td></td>");
            var $td_2 = $("<td></td>");
            var $td_3 = $("<td></td>");
            //3.依次为三个td填充[子标签]和[文字显示内容]
            $td_1.append("<input type='checkbox'/>");
            $td_2.text(num++);
            $td_3.append("<input type='file'/>");
            //将三个td添加到tr
            $tr.append($td_1).append($td_2).append($td_3);

            //.将tr标签添加到第一个Table
            $("table:first").append($tr);
        }



        function  cancelFile(){
             //1.获得数据行上被用户选中的所有的checkbox
             var  $checkedObj =$(":checkbox:gt(0):checked");
            //2.依次定位每一个checkbox---->td---->tr
            $checkedObj.each(
                    function (index,domObj){
                       var $td = $(domObj).parent();//checkbox
                       var $tr = $td.parent();//用户需要删除的数据行就出现
                       //$tr.empty();//清除当前标签的子标签,不会影响当前标签
                        $tr.remove();//将当前标签及其子标签一并删除(崇祯)
                    }
            );
        }

    </script>
</head>
<body>

           <center>
                  <h1>文件上传导航页面</h1>


                  <table border="2">
                      <!--标题行-->
                      <tr>
                          <td><input  type="checkbox"/></td>
                          <td>文件编号</td>
                          <td>上传文件</td>
                      </tr>
                      <!--数据行-->


                  </table>

                 <table  border="2">

                     <tr>
                         <td><input type="button" value="添加上传文件"/></td>
                         <td><input type="button" value="取消上传文件"/></td>
                     </tr>
                  </table>


            </center>

</body>
</html>